<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.imgBox {
				float: left;
				width: 200px;
				height: 200px;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div class="lazyBox">
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/ff0000"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/4682B4"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/ff0000"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/4682B4"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/ff0000"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/4682B4"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/ff0000"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/4682B4"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/ff0000"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/4682B4"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/ff0000"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/4682B4"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<!-- 多复制点上面的代码看效果 -->
		</div>
		<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/util.js"></script>
		<script type="text/javascript">
			$(function() {
				util.lazyBackgroundImg({
					delayTime: 100,
					selector: 'bg-lazy'
				});
			});
		</script>
	</body>
</html>
